<template>
  <div class="product-line-wrapper">
    <div class="product-line-container">
      <div class="search-box">
        <SearchFilter :search-options="searchOptions" />
      </div>

      <div
        class="custom-box"
        v-if="filterCustomer.id"
      >
        <span class="custom-item">
          <span>{{ filterCustomer.customer }}</span>
          <van-icon
            name="cross"
            @click="deleteCustomer"
          />
        </span>
      </div>

      <ul
        class="list-box"
        v-if="list.length"
      >
        <li
          v-for="item in list"
          :key="item.ID"
          @click="jumpDetail(item.ID)"
        >
          <p class="item-header">
            <span>{{ item.name }}</span>
            <span>{{ item.created_date.slice(0, 10) }}</span>
          </p>
          <ul class="item-center">
            <li>
              <p>产线编号</p>
              <p>{{ item.number }}</p>
            </li>
            <li>
              <p>项目数量</p>
              <p class="color-blue">{{ item.project_number }}</p>
            </li>
            <li>
              <p>设备数量</p>
              <p class="color-blue">{{ item.device_number }}</p>
            </li>
          </ul>
          <p class="item-bottom">
            <i class="iconfont iconqiyeguanli"></i>
            <span>{{ item.customer_name }}</span>
          </p>
        </li>
      </ul>

      <!-- 无数据 -->
      <div
        class="no-data-box"
        v-if="noDataState"
      >暂无数据</div>
    </div>

    <!-- 筛选 -->
    <FilterCustomer v-if="showFilterCustomer" />
  </div>
</template>

<script>
import { Search, Icon } from 'vant';
import SearchFilter from '@/components/SearchFilter';
import FilterCustomer from './component/FilterCustomer.vue';
import { getProductLineList } from '@/api/proLineManage.js';

export default {
  name: 'ProductLineManage',
  components: {
    [Search.name]: Search,
    [Icon.name]: Icon,
    SearchFilter,
    FilterCustomer
  },
  data() {
    return {
      list: [],
      showFilterCustomer: false,
      searchOptions: {
        searchKey: '',
        placeholder: '搜索产线编号/产线名称',
        handleSearch: this.getProductLineList,
        handleClear: this.getProductLineList,
        handleFilter: this.handleFilter
      },
      filterCustomer: {},
      noDataState: false
    };
  },
  created() {
    this.getProductLineList();
  },
  methods: {
    // 删除搜索条件-客户
    deleteCustomer() {
      this.filterCustomer = {};
      this.getProductLineList();
    },
    // 获取产线列表
    getProductLineList() {
      this.list = [];
      let params = {
        name: this.searchOptions.searchKey
      };
      if (this.filterCustomer.id) {
        params.customer_id = this.filterCustomer.id;
      }
      getProductLineList(params).then(res => {
        this.list = res.data.list || [];
        if (this.list.length) {
          this.noDataState = false;
        } else {
          this.noDataState = true;
        }
      });
    },
    // 筛选
    handleFilter() {
      this.showFilterCustomer = true;
    },
    // 去详情页
    jumpDetail(id) {
      if (this.$checkBtnPermission('deviceCenter:proLineManage:list:detail')) {
        this.$router.push({
          name: 'productLineDetail',
          query: {
            id
          }
        });
      } else {
        this.$toast(this.$store.state.noDetailPermissionText);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.product-line-wrapper {
  width: 100%;
  height: 100%;

  .product-line-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .search-box {
      margin-bottom: 0.266667rem;
    }

    .custom-box {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 0.213333rem 0.426667rem;
      background-color: #fff;

      .custom-item {
        padding: 0.106667rem 0.213333rem;
        color: var(--color-deep-gray);
        font-size: 0.32rem;
        background-color: #f9f9f9;
        border-radius: 0.106667rem;

        span {
          margin-right: 0.266667rem;
        }

        .van-icon {
          color: #ccc;
        }
      }
    }

    .list-box {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;

      > li {
        position: relative;
        margin-bottom: 0.266667rem;
        padding: 0.32rem 0.426667rem;
        background-color: #fff;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 0.08rem;
          height: 100%;
        }

        &:nth-of-type(1n) {
          &::before {
            background-color: #a7ea8f;
          }
        }

        &:nth-of-type(2n) {
          &::before {
            background-color: #e3a7ff;
          }
        }

        &:nth-of-type(3n) {
          &::before {
            background-color: #f6e869;
          }
        }

        &:nth-of-type(4n) {
          &::before {
            background-color: #ffa7d1;
          }
        }

        .item-header {
          display: flex;
          justify-content: space-between;
          align-items: center;

          span {
            &:first-of-type {
              flex: 1;
              color: #333333;
              font-size: 0.4rem;
            }
            &:last-of-type {
              flex-shrink: 0;
              width: 1.813333rem;
              color: #999999;
              font-size: 0.32rem;
            }
          }
        }

        .item-center {
          display: flex;
          padding: 0.32rem 0;

          > li {
            &:nth-of-type(1),
            &:nth-of-type(2) {
              width: 40%;
            }
            &:nth-of-type(3) {
              width: 20%;
            }

            p {
              color: #666666;
              font-size: 0.346667rem;

              &:first-of-type {
                margin-bottom: 0.213333rem;
                color: #666666;
              }
              &:last-of-type {
              }

              &.color-blue {
                color: #3378ff;
              }
            }
          }
        }

        .item-bottom {
          font-size: 0.32rem;
          color: #999999;

          i {
            margin-right: 0.106667rem;
            font-size: 0.32rem;
          }
        }
      }
    }
  }
}
</style>